<template>
  <a-modal
    v-model:open="open"
    v-model:title="title"
    @ok="handleOk"
    @cancel="handleCancle"
    width="488px"
  >
    <div>
      <a-form
        ref="formProjectRef"
        :model="formProject"
        :rules="rules"
        :label-col="{ style: 'width:122px' }"
      >
        <a-form-item label="项目名称" name="title">
          <a-input
            v-model:value="formProject.title"
            placeholder="请输入"
            style="width: 342px; height: 32px"
            :maxlength="32"
            @change="nameChange"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { useVModel } from '@vueuse/core'
import { useDataSource } from './provide-context.js'
import { message } from 'ant-design-vue'

/**
 * 外部参数
 */
let dataSource = useDataSource()
let props = defineProps({
  open: { type: Boolean, default: () => true },
  title: {
    type: String,
    default() {
      return ''
    },
  },
  contextData: { type: Object, default: () => {} },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:open', 'update:title', 'edit', 'add'])
/**
 * 双向绑定
 */
let open = useVModel(props, 'open', emit)
let title = useVModel(props, 'title', emit)

let formProjectRef = ref()

let formProject = reactive({
  title: undefined,
})
// 初始化编辑的值
formProject.title = props?.contextData?.data?.title
let rules = {
  title: [
    {
      required: true,
      message: '此项为必填项',
      trigger: 'change',
    },
  ],
}
//form表单数据变化
watch(
  () => props.contextData,
  contextData => {
    if (contextData.btnType === 'edit') {
      formProject = reactive({ ...formProject, ...contextData.data })
    }
  },
  { deep: true, immediate: true },
)
function resetForm() {
  formProjectRef.value.resetFields()
}
function nameChange(newName) {
  dataSource.value.forEach(item => {
    if (item.title == formProject.title) {
      message.warning('该名称已存在，请重新输入。')
      return
    }
  })
}
let handleOk = e => {
  if (open.value) {
    formProjectRef.value
      .validate()
      .then(() => {
        open.value = false
        if (props.contextData.btnType === 'edit') {
          emit('edit', formProject)
        } else if (props.contextData.btnType === 'add') {
          emit('add', formProject)
        }
        resetForm()
      })
      .catch(() => {})
  }
}
let handleCancle = () => {
  open.value = false
  formProjectRef.value.resetFields()
}
</script>

<style lang="less" scoped>
:global(.ant-modal .ant-modal-content) {
  padding: 16px 0px 10px 0px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 9px 4px 0 rgba(0, 0, 0, 0.05),
    0 12px 48px 16px rgba(0, 0, 0, 0.03);
}
:global(.ant-modal .ant-modal-footer) {
  padding-right: 24px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
:global(.ant-modal .ant-modal-header .ant-modal-title) {
  line-height: 24px;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 16px;
}
:global(.ant-modal .ant-modal-header) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding-left: 24px;
}
:global(.ant-form-item .ant-form-item-label) {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: right;
  font-family: PingFangSC-Regular;
}
</style>
